import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * BreadcrumbItem面包屑项
 * @element zss-breadcrumb-item
 */
@customElement('zss-breadcrumb-item')
export class ZssBreadcrumbItem extends LitElement {
  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
    }

    .breadcrumb__item {
      display: inline-flex;
      align-items: center;
      font-size: var(--zss-font-size-base);
      color: var(--zss-text-color-regular);
    }

    .breadcrumb__item:last-child {
      color: var(--zss-text-color-primary);
    }

    .breadcrumb__item:last-child .breadcrumb__separator {
      display: none;
    }

    .breadcrumb__inner {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s;
    }

    .breadcrumb__inner:hover {
      color: var(--zss-color-primary);
      cursor: pointer;
    }

    .breadcrumb__inner.is-link {
      font-weight: var(--zss-font-weight-primary);
    }

    .breadcrumb__separator {
      margin: 0 8px;
      color: var(--zss-text-color-placeholder);
      font-weight: normal;
    }

    .breadcrumb__separator .icon {
      width: 1em;
      height: 1em;
      fill: currentColor;
    }
  `;

  /**
   * 链接地址
   * @attr to
   */
  @property({ type: String })
  to = '';

  /**
   * 是否替换当前路由
   * @attr replace
   */
  @property({ type: Boolean })
  replace = false;

  render() {
    const isLink = !!this.to;
    const innerClasses = [
      'breadcrumb__inner',
      isLink ? 'is-link' : ''
    ].filter(Boolean).join(' ');

    const content = isLink ? html`
      <a 
        href=${this.to}
        class=${innerClasses}
        @click=${this.handleClick}
      >
        <slot></slot>
      </a>
    ` : html`
      <span class=${innerClasses}>
        <slot></slot>
      </span>
    `;

    return html`
      <span class="breadcrumb__item">
        ${content}
        <span class="breadcrumb__separator">
          <svg class="icon" viewBox="0 0 1024 1024">
            <path d="M716.298 417.341l-.033.034L307.702 825.95c-16.683 16.683-16.683 43.691 0 60.373s43.691 16.683 60.373 0L776.637 477.748c16.683-16.683 16.683-43.691 0-60.373L368.075 8.803c-16.683-16.683-43.691-16.683-60.373 0s-16.683 43.691 0 60.373l408.563 408.563.033.034z"/>
          </svg>
        </span>
      </span>
    `;
  }

  private handleClick(event: Event) {
    if (this.to) {
      event.preventDefault();
      
      if (this.replace) {
        window.location.replace(this.to);
      } else {
        window.location.href = this.to;
      }
    }
  }
}

/**
 * Breadcrumb面包屑组件
 * @element zss-breadcrumb
 * @slot default - 面包屑项内容
 */
@customElement('zss-breadcrumb')
export class ZssBreadcrumb extends LitElement {
  static styles = css`
    :host {
      display: block;
    }

    .breadcrumb {
      font-size: var(--zss-font-size-base);
      line-height: 1;
    }

    .breadcrumb::after {
      content: '';
      display: table;
      clear: both;
    }

    .breadcrumb__separator {
      margin: 0 8px;
      color: var(--zss-text-color-placeholder);
      font-weight: normal;
    }

    /* 分隔符自定义 */
    .breadcrumb--separator-slash .breadcrumb__separator {
      margin: 0 12px;
    }

    .breadcrumb--separator-slash .breadcrumb__separator::before {
      content: '/';
    }

    .breadcrumb--separator-backslash .breadcrumb__separator {
      margin: 0 12px;
    }

    .breadcrumb--separator-backslash .breadcrumb__separator::before {
      content: '\\';
    }

    .breadcrumb--separator-greater .breadcrumb__separator {
      margin: 0 12px;
    }

    .breadcrumb--separator-greater .breadcrumb__separator::before {
      content: '>';
    }
  `;

  /**
   * 分隔符
   * @attr separator
   */
  @property({ type: String })
  separator = '/';

  /**
   * 分隔符图标
   * @attr separator-icon
   */
  @property({ type: String })
  separatorIcon = '';

  render() {
    const breadcrumbClasses = [
      'breadcrumb',
      this.separator ? `breadcrumb--separator-${this.separator}` : ''
    ].filter(Boolean).join(' ');

    return html`
      <div class=${breadcrumbClasses}>
        <slot></slot>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-breadcrumb': ZssBreadcrumb;
    'zss-breadcrumb-item': ZssBreadcrumbItem;
  }
}